<template>
  <div style="width: 100%"><Charts :option="option" height="200" /></div>
</template>
  
  <script>
import Charts from "@/components/Charts.vue";
export default {
  name: "BusinessIncome",
  components: { Charts },
  props: ["chartData"],
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    this.computedOption();
  },
  methods: {
    computedOption() {
      //valueList
      const data1 = [
        { value: this.chartData.indexList?.[1] || 0, name: "目标值" },
        { value: this.chartData.valueList?.[1] || 0, name: "完成值" },
      ];
      const option = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: 60,
        },
        legend: {
          right: "0",
        },
        series: [
          {
            name: "净利润",
            type: "pie",
            radius: ["35%", "60%"],
            avoidLabelOverlap: false,
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 0,
              formatter: "{c}万元",
            },
            data: data1,
          },
        ],
      };
      this.option = option;
    },
  },
  watch: {
    chartData: {
      immediate: true,
      handler() {
        this.computedOption();
      },
    },
  },
};
</script>
  
  <style>
</style>